<template>
  <div>
    <header class="kf-header">
      <img :src="module.robotImg" class="robot-img" />
      <p class="hello base-font-size">您好，客服小e很高兴为您服务！</p>
    </header>
    <section class="wenti-content">
      <h4 class="wenti-title">{{module.moduleName}}</h4>
      <div class="wenti-item" v-for="item in module.cateList" :key="item.id">
        <p class="wenti-cate">{{item.categoryName}}<span class="iconfont icon-jiantou-elm"></span></p>
        <div class="wenti-detail">
          <p class="wenti wenti-sup">{{item.faqList[0].title}}</p>
          <p class="wenti wenti-sub">{{item.faqList[1].title}}</p>
        </div>
      </div>
    </section>
    <div class="kf-phone">
      <span class="iconfont icon-telephone"></span>
      <span class="base-font-size">电话客服</span>
      <a class="kf-mobile" :href="'tel:' + module.phone">{{module.phone}}</a>
    </div>
    <footer class="kf-footer">
      <button class="kf-btn">在线客服</button>
    </footer>
  </div>
</template>

<script>
import { getKefuData } from '@/api/elm-data'
export default {
  name: 'kefu',
  data() {
    return {
      module: {
        robotImg: '',
        moduleName: '',
        cateList: [],
        phone: ''
      }
    }
  },
  async created() {
    try {
      const { data } = await getKefuData()
      console.log(data)
      this.module.robotImg = data.modules.robotImage
      this.module.moduleName = data.modules.faq.moduleName
      this.module.cateList = data.modules.faq.categoryDtoList
      this.module.phone = data.modules.entrance[0].phone
    }catch(e) {
      this.$toast('获取问题失败')
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log(from.path)
    if(from.path === '/mine') {
      next()
    }else {
      next('/index')
    }
  }
}
</script>

<style scoped lang="less">
  .kf-header {
    height: 240px;
    background: url('https://shadow.elemecdn.com/faas/service-front/static/media/bg.c8e3f1ab.png') no-repeat center center / 100% 100%;
  }
  .robot-img {
    height: 100px;
    width: 100px;
    margin: 50px;
  }
  .hello {
    display: inline-block;
    padding: 10px 50px 10px 10px;
    background-color: rgba(0, 0, 0, .1);
    color: #fff;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      border: 10px solid rgba(0, 0, 0, .1);
      border-top: 10px solid transparent;
      border-right: 10px solid transparent;
      left: -10px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  }
  .wenti-content {
    position: absolute;
    top: 180px;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 20px 0;
    background-color: #fff;
  }
  .wenti-title {
    margin: 10px;
  }
  .wenti-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
    &:last-child {
      border-bottom: none;
    }
  }
  .wenti-cate {
    margin: 0;
    padding: 40px 0;
    width: 200px;
    border-right: 1px solid #e6e6e6;
    text-align: center;
    font-size: 30px;
  }
  .icon-jiantou-elm {
    font-size: 24px;
  }
  .wenti-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .wenti {
    margin: 0 20px;
    padding: 20px 0;
    font-size: 32px;
    color: #787878;
  }
  .wenti-sup {
    border-bottom: 1px solid #e6e6e6;
  }
  .kf-phone {
    margin-top: 1000px;
    background-color: #f5f5f5;
    text-align: center;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      width: 120px;
      border: 1px solid #8a8a8a;
      left: 100px;
      top: 15px;
    }
    &::after {
      content: '';
      position: absolute;
      width: 120px;
      border: 1px solid #8a8a8a;
      right: 100px;
      top: 15px;
    }
  }
  .kf-mobile {
    margin-left: 10px;
    color: #00A9FF;
    font-size: 28px;
  }
  .icon-telephone {
    font-size: 28px;
    font-weight: 600;
    color: #aaa;
  }
  .kf-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 15px;
    width: 100vw;
    background-color: #fff;
    box-sizing: border-box;
  }
  .kf-btn {
    display: block;
    margin: 0 auto;
    width: 96%;
    padding: 25px;
    background-color: #0097FF;
    border-radius: 10px;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
  }
</style>
